import { createApp } from 'vue'
import pinia from './stores'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import './styles/index.scss'
import ElSvg from './components/SvgIcon/ElSvg'
import './permission'

// 引入全局组件
import Category from '@/components/Category/index.vue'
const app = createApp(App)
// 注册全局组件
app.component('Category',Category)

// 引入仓库(注:仓库不是默认导出的,是分别导出的,所以需要加个大括号)
import {useUserInfoStore} from './stores/userInfo'

// 全局自定义指令
app.directive('authority',{
  mounted(el,binding){
    // 判断:如果仓库中某用户的权限没有某一项的话,则需要从数组中移除该项
    if(!useUserInfoStore().buttonsList.includes(binding.value)){
      // 拿到该元素的父节点,然后从DOM树上将该元素移除
      el.parentNode.removeChild(el)
    }
  }
})

ElSvg(app)
app.use(pinia)
  .use(router)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .mount('#app')
